<template>
    <div class="box" :style="{color:strokeColor}">
        <div class="picture">
          <div class="header"></div>
          <img :src="imgUrl" >
        </div>
        <div class="tex">
            <div class="id">WT{{ID}}</div>
            <div class="condition">{{healthy}}</div>
        </div>
        
    </div>
    </template>
    
    <script >
    export default {
    props:['ID','Condition'],
    data(){
    return{
      imgUrl:'',
      Id:'',
      strokeColor:'',
      healthy:'',
      Condition:''
    }
  },
  created() {
    this.changeImg();
  },
  methods: {
    changeImg() {
      if(this.Condition == "1"){
        this.imgUrl = require('../../../assets/images/fengjilv.png');
        this.strokeColor = '#1afa29';
        this.healthy = "正  常";
      }else if(this.Condition == "2") {
        this.imgUrl = require('../../../assets/images/fengjihong.png');
        this.strokeColor = '#d81e06';
        this.healthy = "故  障";
      }else{
        this.imgUrl = require('../../../assets/images/fengjihui.png');
        this.strokeColor = '#8a8a8a';
        this.healthy = "未接入";
      }
    },
}
}
</script>
    
    <style lang='less' scoped>
    .box{
      font-size: 20px;
  border:1px solid #B0C4DE;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);
  height: 100%;
  width: 100%;
  max-width: 200px;
  /* position: relative; */
  display: flex;
        .picture{
          flex: 1;
          width: 40%;
          min-height: 100%;
          position: relative; 
          .header{
            height: 10%;
          }
          
        }
        .picture img{
          
          max-width:100%;
          max-height:100%;
        }
        .tex{
          flex: 1;
  display: flex;
  flex-direction: column;
  justify-content:center;
             .id{
            flex: 1;
            width:100%;
            height: 50%;
            max-height:50%;
            line-height: 300%;
            position: relative;
            text-align: center;
        }
        .condition{
          flex: 1;  
          width:100%;
            height: 50%;
            max-height: 50%;
            line-height: 300%;
            position: relative;
            text-align: center;
        }
        }
       
        
    }
    </style>